/* 引入字体 */
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700");
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* 全局样式 */
html,
body {
    /* 字体设置 */
    font-family: "IBM Plex Sans", linkMacSystemFont, San Francisco, Roboto, Helvetica Neue, Segoe UI, sans-serif; /* 设置字体 */
    -webkit-text-size-adjust: 100%; /* 防止文本大小调整 */
    /* 防止字体缩放 */
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility; /* 优化文本可读性 */
    box-sizing: border-box; /* 盒子模型设置 */
    margin: 0; /* 去掉默认边距 */
    padding: 0; /* 去掉默认内边距 */
    overflow-x: hidden; /* 隐藏水平溢出 */
}

/* 盒子模型继承 */
*,
*:before,
*:after {
    box-sizing: inherit;
}


/* 容器样式 */
.container {
    background: rgba(0, 0, 0, 0.50); /* 背景颜色 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    top: 0;
    min-height: 100vh; /* 最小高度为视口高度 */
    height: 100%; /* 高度100% */
    width: 100vw; /* 宽度100% */
    overflow-y: auto; /* 垂直溢出滚动 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); /* 添加阴影 */
}

/* 右侧内容样式 */
.container-right {
    margin-top: 35px;
    width: 40%; /* 占据40%的宽度 */
    padding: 30px; /* 内边距 */
}

/* 左侧内容样式 */
.container-left{
    width: 60%;
    height: 80%;
    flex-direction: column;/* 垂直方向布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

/* 设置头部容器的样式 */
.header-container {
    justify-content: center;
    align-items: flex-start;
    display: flex;
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
    gap: 10px; /* 元素间的间距 */
    margin-top: 0px;
    position: absolute;/* 绝对定位 */
    top: 0;
    max-height: 90px;
}

/* 设置logo的样式，控制最大宽度和高度 */
.logo {
    justify-content: flex-start;/* 水平方向布局 */
    display: flex;
    max-width: 100%;
    max-height: 70px;
}

/* 设置logo容器的样式，确保内容居中显示 */
.logo-container {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
}

/* 设置二维码容器的样式，确保内容居中显示 */
.Qr-code-container {
    width: 60%;
    height: 60%;
    align-items: center;
}

/* 设置二维码的样式，控制宽度和高度 */
.Qr-code{
    width: 100%;
    height: 100%;
    align-items: center;
}

/*!* 容器背景的半透明覆盖层 *!*/
/*.container:before {*/
/*    content: ""; !* 伪元素内容为空 *!*/
/*    position: fixed; !* 固定定位 *!*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    left: 0; !* 充满整个容器 *!*/
/*    background: rgba(21, 198, 198, 0.4); !* 半透明黑色背景 *!*/
/*}*/

/* 动画效果 */
@-webkit-keyframes form-open {
    /* 表单打开动画 */
    0% { /* 初始状态 */
        -webkit-clip-path: polygon(0 20px, 20px 0, 20px 0, 20px 0, 0 20px, 0 20px);
        clip-path: polygon(0 20px, 20px 0, 20px 0, 20px 0, 0 20px, 0 20px);
    }
    50% { /* 中间状态 */
        -webkit-clip-path: polygon(0 20px, 20px 0, 20px 0, 20px calc(100% - 20px), 0 100%, 0 100%);
        clip-path: polygon(0 20px, 20px 0, 20px 0, 20px calc(100% - 20px), 0 100%, 0 100%);
    }
    100% { /* 结束状态 */
        -webkit-clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    }
}

/* 移动设备动画 */
@keyframes form-open {
    0% {
        -webkit-clip-path: polygon(0 20px, 20px 0, 20px 0, 20px 0, 0 20px, 0 20px);
        clip-path: polygon(0 20px, 20px 0, 20px 0, 20px 0, 0 20px, 0 20px);
    }
    50% {
        -webkit-clip-path: polygon(0 20px, 20px 0, 20px 0, 20px calc(100% - 20px), 0 100%, 0 100%);
        clip-path: polygon(0 20px, 20px 0, 20px 0, 20px calc(100% - 20px), 0 100%, 0 100%);
    }
    100% {
        -webkit-clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    }
}
/* 渐显动画 */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
        transform: translate3d(-16px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
/* 移动设备渐显动画 */
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translate3d(-16px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
/* 表单样式 */
.form {
    display: grid; /* 网格布局 */
    grid-gap: 16px; /* 网格间隙 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    max-width: 400px; /* 最大宽度 */
    width: 100%; /* 宽度100% */
    padding: 30px; /* 内边距 */
    overflow: hidden; /* 隐藏溢出内容 */
    /*background: linear-gradient(to bottom, #ffffff, #e0e0e0); !* 添加渐变背景
    -webkit-clip-path: polygon(0 20px, 20px 0, 20px 0, 20px 0, 0 20px, 0 20px); /* 动画剪切路径 */
    clip-path: polygon(0 20px, 20px 0, 20px 0, 20px 0, 0 20px, 0 20px);
    -webkit-animation: form-open 1s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s; /* 表单打开动画 */
    /*animation: form-open 1s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.5s; !* 表单打开动画 *!*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加阴影 */
}

/* 表单内部元素的动画效果 */
.form > * {
    position: relative; /* 相对定位 */
    opacity: 0; /* 初始透明度 */
    -webkit-animation: fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* 渐显动画 */
    animation: fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* 渐显动画 */
}

/* 表单元素延迟显示 */
.form > *:nth-child(2) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.form > *:nth-child(3) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
.form > *:nth-child(4) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.form > *:nth-child(5) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.form > *:nth-child(6) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.form > *:nth-child(7) { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; }
.form > *:nth-child(8) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
.form > *:nth-child(9) { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }

/* 表单背景图样式 */
.form__image {
    position: absolute; /* 绝对定位 */
    -webkit-animation: none; /* 禁用动画 */
    animation: none; /* 禁用动画 */
    opacity: 0.85; /* 透明度 */
    filter: blur(16px); /* 模糊效果 */
    top: 0; left: 0; /* 定位 */
    width: 100vw; /* 宽度100% */
    height: 100vh; /* 高度100% */
    background: linear-gradient(rgba(16, 16, 16, 1), rgba(16, 16, 16, 1)), url("https://res.cloudinary.com/dokf7npvg/image/upload/v1540355245/0jbUKoX.jpg"); /* 背景渐变和图片 */
    background-position: center; /* 背景居中 */
    background-size: cover; /* 背景覆盖 */
}

/* 表单Logo样式 */
.form__logo {
    width: 80%; /* 宽度80% */
    height: auto; /* 自适应高度 */
    justify-self: center; /* 居中对齐 */
    font-family: 'Great Vibes', cursive;
    font-size: 3em;
    color: #ffffff;
    opacity: 0.9;
    text-shadow:
            1px 1px 2px #000,
            0 0 1em #fafafa,
            0 0 0.5em #ffffff,
            0 0 0.3em #ffffff,
            0 0 0.1em #ffffff;
    animation: colorCycle 5s infinite;
}

/* logo动态颜色循环 */
@keyframes colorCycle {
    0% { color: #ffffff; }
    50% { color: #000000; }
    100% { color: #ffffff; }
}

/* 输入框样式 */
.input {
    position: relative; /* 相对定位 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    width: 100%; /* 宽度100% */
}

/* 输入框元素样式 */
.input__element {
    border: 0; /* 去掉边框 */
    margin: 0; /* 去掉外边距 */
    width: 100%; /* 宽度100% */
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.5); /* 内阴影 */
    background: rgba(0, 0, 0, 0.3); /* 背景颜色 */
    height: 46px; /* 高度 */
    transition: box-shadow 0.4s ease; /* 过渡效果 */
    padding-left: 10px; /* 左内边距 */
    color: rgba(255, 255, 255, 0.9); /* 字体颜色 */
    font-size: 20px;/* 字体大小 */
}
.input__element:focus {
    /* 输入框聚焦效果 */
    box-shadow: inset 0 -2px 0 0 #ffffff;
    outline: none; /* 去掉轮廓线 */
}
/* 输入框标签样式 */
.input__label {
    font-size: 20px; /* 字体大小 */
    position: absolute; /* 绝对定位 */
    left: 10px; /* 定位 */
    color: rgba(255, 255, 255, 0.4); /* 字体颜色 */
    pointer-events: none; /* 禁用指针事件 */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡效果 */
}

/* 输入框标签移动效果 */
.input__element:not(:-ms-input-placeholder) + .input__label {
    top: -16px; left: 0; font-size: 14px; transform: translate3d(0, -5px, 0); }
.input__element:focus + .input__label,
.input__element:not(:placeholder-shown) + .input__label {
    top: -16px; left: 0; font-size: 14px; transform: translate3d(0, -5px, 0); }

/* 按钮样式 */
.button {
    background: #ffffff; /* 背景颜色 */
    border: 0; /* 去掉边框 */
    padding: 0; /* 去掉内边距 */
    margin: 0; /* 去掉外边距 */
    font-family: inherit; /* 继承字体 */
    font-size: 16px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    height: 50px; /* 高度 */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); /* 剪切路径 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    text-transform: uppercase; /* 大写字母 */
    text-align: left; /* 文本左对齐 */
    padding: 0 20px; /* 内边距 */
    cursor: pointer; /* 指针样式 */
}
.button:focus { /* 按钮聚焦效果 */
    outline: none; /* 去掉轮廓线 */
}
.button:before { /* 按钮悬停效果 */
    content: "";
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 0; left: 0; /* 充满整个按钮 */
    background: #1be457; /* 背景颜色 */
    transform-origin: right; /* 变换原点 */
    transform: scaleX(0); /* 初始不可见 */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡效果 */
}
.button:hover:before, .button:focus:before { /* 按钮悬停和聚焦效果 */
    transform-origin: left center; /* 变换原点 */
    transform: scaleX(1); /* 扩展到整个按钮 */
}

/* 按钮图标样式 */
.button:hover .button__icon,
.button:focus .button__icon {
    transform: translate3d(10px, -50%, 0); /* 平移效果 */
}

.button__label {
    position: relative; /* 相对定位 */
    font-size: 16px;
    color: #111111;
}

.button__icon {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 定位 */
    transform: translate3d(0, -50%, 0); /* 平移效果 */
    right: 25px; /* 定位 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡效果 */
}
.button__icon:before {
    content: ""; /* 伪元素内容为空 */
    height: 1px; /* 高度 */
    width: 100%; /* 宽度 */
    background: black; /* 背景颜色 */
    position: absolute; /* 绝对定位 */
    left: 0; /* 定位 */
    top: 12px; /* 定位 */
}
.button__icon:after {
    content: ""; /* 伪元素内容为空 */
    transform: rotate(45deg); /* 旋转效果 */
    border-top: 1px solid black; /* 边框 */
    border-right: 1px solid black; /* 边框 */
    width: 8px; /* 宽度 */
    height: 8px; /* 高度 */
    position: absolute; /* 绝对定位 */
    right: 0; /* 定位 */
    top: 8px; /* 定位 */
}
/* 验证码容器样式 */
.captcha {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    background-color: #131313; /* 背景颜色 */
    padding: 0px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    height: 70px;
    width: 100%; /* 占满宽度 */
    box-sizing: border-box; /* 包括内边距和边框在内的宽度 */
    justify-content: flex-end; /* 内容靠右对齐 */
}
/* 验证码容器样式 */
.captcha-right{
    display: flex;
    height: 100%;
    width: 100%;
    float: right;
    margin-right: -73px;
}

.captcha img {
    margin-right: 10px; /* 验证码图片与按钮之间的间距 */
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #8d8f97;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
    float: right;
    margin-right: auto;
}

.special-word {
    font-size: 14px;
    color: #007bff;
    margin-left: 10px;
    color: green;
    text-decoration: none; /* 移除默认下划线 */
    text-align: right; /* 将内容右对齐 */
}

.special-word a {
    color: #f1f4f1; /* 链接颜色 */
    text-decoration: none; /* 移除默认下划线 */
}

.special-word a:hover {
    color: #9ca59c; /* 鼠标悬停时变绿 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 设置关闭按钮的样式，包括光标、绝对定位和样式 */
.close-btn {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 50px;
    font-weight: bold;
    color: #333;
    z-index: 1000; /* 确保按钮在最上层 */
}
